<template>
  <div>
    <q-dialog v-model="diag">
      <div>
        <HtreplaceForm
          @submit="initData()"
          mode="create"
          :stockCode="props.stockCode"
        ></HtreplaceForm>
      </div>
    </q-dialog>
    <q-dialog v-model="editDiag">
      <div>
        <HtreplaceForm
          v-if="editRow"
          @submit="initData()"
          mode="edit"
          @close="editDiag = false"
          :stockCode="props.stockCode"
          :edit-row="editRow"
        ></HtreplaceForm>
      </div>
    </q-dialog>
    <div class="row justify-end q-mb-md" v-if="parent">
      <q-btn class="default-btn" label="Create" @click="diag = true" />
    </div>
    <ScrollArea :bot-margin="50">
      <div class="sub-header q-ma-sm">{{ 'Hard Time Replacement List' }}</div>
      <q-table
        @row-dblclick="dblclickFn"
        :rows="parent"
        :columns="cols"
        :rows-per-page-options="[5]"
        class="q-ma-sm my-table"
        wrap-cells
      >
        <template v-slot:body-cell-stock_code="props">
          <q-td>
            {{ props.row.stock_item.stock_code }}
          </q-td>
        </template>

        <template v-slot:body-cell-action="props">
          <q-td>
            <q-btn
              class="q-px-sm edit-btn"
              flat
              round
              icon="edit"
              @click="editFn(props.row)"
            />
            <q-btn
              class="q-px-sm del-btn"
              color="negative"
              round
              flat
              icon="delete"
              @click="deleteFn(props.row)"
            />
          </q-td>
        </template>

        <template v-slot:body-cell-checkbox="props">
          <q-td> <q-checkbox v-model="val" />{{ props.value }} </q-td>
        </template>

        <template v-slot:body-cell-serial_no="props">
          <q-td>
            {{ props.row.serial_no }}
          </q-td>
        </template>
      </q-table>
      <div v-if="childs.length > 0" class="sub-header q-ma-sm">
        {{ 'Child Hard Time Replacement List' }}
      </div>

      <q-table
        v-if="childs.length > 0"
        :rows="childs"
        :columns="cols"
        :rows-per-page-options="[5]"
        class="q-ma-sm my-table"
        @row-dblclick="dblclickFn"
        wrap-cells
      >
        <template v-slot:body-cell-stock_code="props">
          <q-td>
            {{ props.row.stock_item.stock_code }}
          </q-td>
        </template>

        <template v-slot:body-cell-action="props">
          <q-td>
            <q-btn
              class="q-px-sm edit-btn"
              flat
              icon="edit"
              @click="editFn(props.row)"
            />
            <q-btn
              class="q-px-sm"
              color="negative"
              flat
              icon="delete"
              @click="deleteFn(props.row)"
            />
          </q-td>
        </template>

        <template v-slot:body-cell-checkbox="props">
          <q-td> <q-checkbox v-model="val" />{{ props.value }} </q-td>
        </template>

        <template v-slot:body-cell-serial_no="props">
          <q-td>
            {{ props.row.serial_no }}
          </q-td>
        </template>
      </q-table>
    </ScrollArea>
  </div>
</template>
<script setup lang="ts">
import { useQuasar } from 'quasar';
import HtreplaceForm from './HtreplaceForm.vue';
import { StockItemHTReplacement } from 'src/services/type';
import { onMounted, ref } from 'vue';
import {
  deleteStockItemHtreplace,
  getHTreplacement,
} from 'src/services/stockCodeService';
import ScrollArea from '../ScrollArea.vue';

const props = defineProps<{
  stockItemId?: number;
  stockCode: string;
}>();

const $q = useQuasar();
const diag = ref(false);
const editDiag = ref(false);
const val = ref(false);
const editRow = ref();
const parent = ref<[]>([]);
const childs = ref<[]>([]);
const align = 'left';
const cols = [
  {
    name: 'description',
    label: 'Short Description',
    field: 'description',
    format:(val, row)=>{
      return row.stock_item.description
    },
    sortable: true,
    align,
  },
  {
    name: 'component',
    label: 'Component',
    field: 'component',
    sortable: true,
    align,
  },
  {
    name: 'period',
    label: 'Period(Months)',
    field: 'period',
    sortable: true,
    align,
  },
  {
    name: 'action',
    label: 'Action',
    field: 'action',
    sortable: true,
    align,
  },
];

async function initData() {
  const res = await getHTreplacement(props.stockCode);
  if (res.data) {
    parent.value = res.data.filter(
      (item) => item.stock_item.stock_code == props.stockCode
    );

    childs.value = res.data.filter(
      (item) => item.stock_item.stock_code != props.stockCode
    );
  }
  editDiag.value = false;
  diag.value = false;

  /*  htreplace.value = [
    { id: 1, stock_code: 'sfsaf', component: 'abc', last: '6/2023', period: 1 },
    { id: 2, stock_code: 'waf', component: '2222', last: '6/2023', period: 1 },
  ]; */
}

function dblclickFn(evt: any, row: StockItemHTReplacement, index: number) {
  editRow.value = { ...row };
  editDiag.value = true;
}

function editFn(row: StockItemHTReplacement) {
  editRow.value = { ...row };
  editDiag.value = true;
}
function deleteFn(row: StockItemHTReplacement) {
  $q.dialog({
    title: 'Delete',
    message: 'Any update will effect incomplete maintenance orders immediately.',
    cancel: true,
  }).onOk(async () => {
    const res = await deleteStockItemHtreplace(row.id);
    if (res) {
      initData();
    }
  });
}
onMounted(() => {
  initData();
});
</script>
